<template>
  <div class="vip-page" :class="{'over-hidden': dialogVisible}">
    <div class="nav-bar" style="background: #12CBAF">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left-white.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#ffffff">VIP会员中心</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="vip-container" :style="{'padding-top':titleH + statusH + 'px'}">
        <div class="vip-content">
          <img  src="/static/assets/img/vip-bg.png" class="vip-bg"/>
          <img  src="/static/assets/img/vip-qrcod.png" class="qrcod" />
          <div class="text">添加乐仪专属客服</div>
          <div class="btn">添加乐仪专属客服</div>
        </div>


    </div>

  </div>


</template>

<script>
  import navbar from '@/components/navbar'
  import Core from 'core'
  import global from 'global'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        dialogVisible: false,
        vipConfigList: [],
        selectVipConfig: {},
        userVip: {}
      }
    },
    onLoad() {

    },
    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      },


    }
  }
</script>

<style lang="scss" scoped>

  .vip-page {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgb(234, 234, 234);


    .vip-container {
      width: 100%;
      position: relative;
      padding-left: 20px;
      padding-right: 20px;
      .vip-content {
        width:336px;
        height:380px;
        top: 20px;
        border-radius:5px;
        overflow: hidden;
        position: relative;
        .vip-bg {
          width:336px;
          height:380px;
          position: absolute;
          z-index: 1;
        }
        .qrcod {
          width: 170px;
          height: 170px;
          position: relative;
          z-index: 2;
          top: 50px;
          left: calc(50% - 85px);
        }
        .text {
          text-align: center;
          position: relative;
          z-index: 2;
          font-size:16px;
          color:rgba(49,49,49,1);
          top: 80px;
        }
        .btn {
          width:232px;
          height:43px;
          line-height: 43px;
          background:rgba(18,203,175,1);
          border-radius:5px;
          font-size:21px;
          color: #FFFFFF;
          text-align: center;
          font-weight: 500;
          position: relative;
          z-index: 2;
          left: calc(50% - 116px);
          top: 92px
        }
      }

    }

    .line {
      width: 100%;
      height: 10px;
      background: #F5F5F5;
    }

    .line-division {
      background: #959595;
      height: 1px;
    }
  }


  .over-hidden {
    overflow: hidden;
  }
</style>
